<template>
	      <div>
	      	<header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">订单详情</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <p class="db" style="padding:0 10px;color:#f50028;margin-bottom:20px;padding-top:10px;;">为了您的财产安全,不要点击陌生链接,不要向任何人透漏个人信息,谨防诈骗。</p>
               <div id="main">
               	     <div class="top">
               	     	  <p>还款中</p><span>第3期应还</span><span style="font-size:16px;color:#f50028;">¥507</span><button @click="qrRepay">还款</button>
               	     </div>
               	     <div class="center">
               	     	   <p style="font-size:16px;line-height:40px;border-bottom:1px solid #c9c8cd;color:#333333;">卡帮帮-现金贷</p>
               	           <ul>
               	           	    <li>
               	           	    	<p>借款金额：</p><span style="font-size:16px;color:#f50028;">2000元</span>
               	           	    </li>
               	           	    <li>
               	           	        <p>借款期限：</p><span>4周</span>
               	           	    </li>
               	           	    <li>
               	           	    	<p>分期期数：</p><span>4期</span>
               	           	    </li>
               	           	    <li>
               	           	    	<p>商户名称：</p><span>卡帮帮</span>
               	           	    </li>               	           	    
               	           </ul>
               	     </div>
               	     <ul>
               	     	<li>
               	     		<p class="db">订单编号：</p>
               	     		<span style="font-size:12px;">BA2018092611547024170508288</span>
               	     	</li>
               	     	<li>
               	     		<p class="db">下单时间：</p>
               	     		<span style="font-size:12px;">2018-09-26 15:35:48</span>
               	     	</li>
               	     	<li>
               	     		<p class="db">放款时间：</p>
               	     		<span style="font-size:12px;">2018-09-27</span>
               	     	</li>
               	     	<li>
               	     		<p class="db">合同时间：</p>
               	     		<span style="font-size:12px;">2018-09-26~2018-10-25</span>
               	     	</li>
               	     </ul>
               </div>
               <div class="list">
               	       <p style="display:flex;justify-content:space-between;margin-bottom:10px;">
               	       	   <span style="font-size:16px;color:#333333;">第1期</span><span style="width:30%;line-height:25px;background:#52c2ea;border-radius:15px;text-align:center;color:#fff;">¥514</span><span style="color:#52c2ea;">已还</span> 
               	       </p>
               	       <p style="font-size:12px;">还款截止时间:2018-10-04</p>
               </div>
               <div class="list">
               	       <p style="display:flex;justify-content:space-between;margin-bottom:10px;">
               	       	   <span style="font-size:16px;color:#333333;">第2期</span><span style="width:30%;line-height:25px;background:#52c2ea;border-radius:15px;text-align:center;color:#fff;">¥514</span><span style="color:#52c2ea;">已还</span> 
               	       </p>
               	       <p style="font-size:12px;">还款截止时间:2018-10-04</p>
               </div>
               <div class="list">
               	       <p style="display:flex;justify-content:space-between;margin-bottom:10px;">
               	       	   <span style="font-size:16px;color:#333333;">第3期</span><span style="width:30%;line-height:25px;background:#52c2ea;border-radius:15px;text-align:center;color:#fff;">¥514</span><span style="color:#52c2ea;">待还</span> 
               	       </p>
               	       <p style="font-size:12px;">还款截止时间:2018-10-04</p>
               </div>
               <div class="list">
               	       <p style="display:flex;justify-content:space-between;margin-bottom:10px;">
               	       	   <span style="font-size:16px;color:#333333;">第4期</span><span style="width:30%;line-height:25px;background:#52c2ea;border-radius:15px;text-align:center;color:#fff;">¥514</span><span style="color:#52c2ea;">待还</span> 
               	       </p>
               	       <p style="font-size:12px;">还款截止时间:2018-10-04</p>
               </div>
	      </div>
</template>

<script>


export default {
      
      methods:{
      	  back(){
      	  	this.$router.go(-1)
      	  },
      	 qrRepay(){
            const _this = this;
            this.$vux.confirm.show({
                title: '是否确认还款，确认后系统将从绑定的银行卡中扣除还款费用，请确保银行卡余额充足，用于支付还款！',
                onCancel () {
                },
                onConfirm () {
                    console.log("你点击了还款")
                }
           });
        }
      }

}
</script>

<style lang="less" scoped>
         /**{ touch-action: none; }*/
        header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position:fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         #main{
         	width:90%;
         	padding-left:3%;
         	padding-right:3%;
         	height:300px;
         	background:#fff;
         	position:relative;
         	left:0;
         	right:0;
         	margin:0 auto;
         	border-radius:5px;
         	margin-bottom:10px;
         }
         .top{
         	display:flex;
         	height:15%;
         	justify-content:space-between;
         	align-items:center;
         	   p{
         	   	font-size:14px;
         	   	color:#333333;
         	   }
         	   span{
         	   	font-size:14px;
         	   	color:#333333;
         	   }
         	   button{
         	   	width:30%;
         	   	height:30px;
         	   	line-height:14px;
         	   	border-color:#0999ef;
         	   	color:#0999ef;
         	   }
         }
         .center{
         	 widows:100%;
         	 height:50%;
         	 display:flex;
         	 flex-direction:column;
         	 background:#edf1f4;
         	 border-radius:5px;
         	 padding:0 3%;
         }
         ul{
         	width:100%;
         	flex:1;
         	display:flex;
         	flex-direction:column;
         	justify-content:space-around;
         	padding:2% 0;
         }
         li{
         	display:flex;
         	   span{
         	   	color:#333333;
         	   }
         }
         .db{
         	font-size:12px;
         }
         .list{
         	width:90%;
         	background:#fff;
         	height:80px;
         	border-radius:5px;
         	position:relative;
         	left:0;
         	right:0;
         	margin:0 auto;
         	padding-left:2%;
         	padding-right:5%;
         	padding-top:10px;
         	margin-bottom:10px;
         }
</style>